<template>
  <div class="personal-cont">

    <div class="my-course">
      <div class="title">
        <div class="lab-title">收藏课程</div>
        <div class="tit-Item"><span><em class="active">按收藏时间进行排序</em> </span><span><em class="active"></em></span>
        </div>
      </div>

      <div class="cont">
        <div v-for="course in courseList" class="col-lg-6">
          <div class="item">
            <div class="title">
              <span class="lab">{{course.courseName}}</span>
              <br>
              <span class="time">收藏时间:{{course.startTime | formatDate}}</span>
            </div>
            <a @click="redirect(course.courseId)">
              <div class="portrait" align="center">
                <img :src="imgUrl+'/'+course.pic" alt="" style="width:300px;height: 173px">
              </div>
              <div class="parting"></div>
            </a>
            <div class="butItem text-center">
              <router-link :to="'/learning/'+course.courseId+'/0'" class="golearing" target="_blank">
                开始学习
              </router-link>
              <a @click="deleteCollect(course.courseId)" class="classcom">取消收藏</a></div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!--    <div id="listcont">-->
  <!--      <li><a href="#">课程成绩</a></li>-->
  <!--      <li><a href="#">联系老师</a></li>-->
  <!--      <li><a href="#">课程延期</a></li>-->
  <!--      <li><a href="#">退出课程</a></li>-->
  <!--    </div>-->
  </div>
</template>

<script>
    import * as collectApi from '../api/collect'
    import * as systemApi from '@/base/api/system'
    import utilApi from '../../../common/utils';

    export default {
        components: {},
        data() {
            return {
                userId: '',
                page: 1,
                size: 20,
                courseList: [],
                imgUrl: 'http://img.sfs.com/',
            }
        },

        methods: {
            //获得当前登录用户
            refresh_user: function () {
                let activeUser = utilApi.getActiveUser();
                if (activeUser) {
                    this.logined = true;
                    this.userId = activeUser.userid;
                }
            },
            //重定向到课程详情页面
            redirect: function (courseId) {
                window.location = "http://www.sfs.com/course/detail/" + courseId + ".html";
            },
            //取消收藏
            deleteCollect: function (courseId) {
                this.$confirm('确认取消收藏该课程吗？', '提示', {}).then(() => {
                    collectApi.delete_collect(this.userId, courseId).then((res) => {
                        if (res.success) {
                            this.$message({
                                type: 'success',
                                message: '取消成功!'
                            });
                            //删除成功之后调用查询方法
                            this.query();
                        } else {
                            this.$message({
                                type: 'error',
                                message: '取消失败!'
                            });
                        }
                    });
                });
            },
            //查询收藏课程列表
            query: function () {
                collectApi.get_collect(this.userId).then((res) => {
                    if (res) {
                        this.courseList = res;
                    }
                });
            }
        },
        created() {
            //获取当前登录用户
            this.refresh_user();
            //查询用户收藏的课程
            this.query();
        },
        mounted() {

        }
    }

</script>

<style>
  @import './../../../../static/plugins/normalize-css/normalize.css';
  /*@import './../../../../static/plugins/bootstrap/dist/css/bootstrap.css';*/
  @import './../../../../static/css/page-learing-personal.css';

</style>
